<script setup>
import {onMounted} from 'vue'
import {NAvatar, NButton, NFlex, NImage, NInput, NTabPane, NTabs, NTag} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {renderIcon} from "@/utils";
import Project from '@/views/customer/home/project.vue'
import Order from '@/views/customer/home/order.vue'
import Cases from '@/views/customer/home/cases.vue'
import Tags from '@/views/customer/home/tags.vue'
import Photo from '@/views/customer/home/photo.vue'
import Material from '@/views/customer/home/material.vue'
import Interview from '@/views/customer/home/interview.vue'
import Test from '@/views/customer/home/test.vue'
import Medicine from '@/views/customer/home/medicine.vue'
import Return from '@/views/customer/home/return.vue'
import Appointment from '@/views/customer/home/appointment.vue'

import TheIcon from "@/components/icon/TheIcon.vue";
import Info from "@/views/customer/home/info.vue";
import CustomerInfo from "@/views/customer/home/customerinfo.vue";

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  select_customer:{
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
      weimei:0,
      cdp:0,
      fujia:0,
      other:0,
      buy_money:0,
      cases:0,
      appoint_count:0,
      return_count:0,
      operation_count:0,
      face_count:0,
      test_count:0,
      having_customers:0,
      customers_level5:0

    }
  },
});

onMounted(() => {
  data.select_customer = props.infoData
})

function close_draw(){
  data.select_customer.draw = false
}

function update_info(){
  api.getCustomer({
    user_id:data.select_customer.user_id,
  }).then((res) => {
     data.select_customer.totals = res.data.totals
  })
  return true
}

const emit = defineEmits(['call-parent'])
function on_refx(){
  emit('call-parent')
}

</script>

<template>
  <div class="main_box">
    <div class="main_header">
      <div style="display: flex">
      <NAvatar :src="data.select_customer.avatar"  class="avatar" />
      <div class="info">
        <span class="name">{{data.select_customer.name}}{{data.select_customer.mobile}}</span><br>
        <span class="no">No.{{data.select_customer.card_number}}
           <n-button v-for="item in data.select_customer.record_hobby" type="error" :bordered="false" size="tiny" class="tags">{{item.content}}</n-button>
        </span>
      </div>
      </div>
      <div>
       <TheIcon icon="material-symbols:close" style="cursor:pointer" :size="25" class="mr-5" @click="close_draw"/>
      </div>
    </div>
    <n-tabs type="segment"  animated size="large" :tabs-padding="20" pane-style="padding: 0px;" @before-leave="update_info">
          <n-tab-pane name="基础信息">
            <Info :info-data="props.infoData" @call-parent="on_refx"/>
          </n-tab-pane>
          <n-tab-pane name="大健康问诊记录">
            <CustomerInfo :info-data="props.infoData" />
          </n-tab-pane>
          <n-tab-pane name="报告查询">
            <Test :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="抗衰计划">
            <Appointment :info-data="data.select_customer"/>
          </n-tab-pane>
<!--          <n-tab-pane name="订单记录">-->
<!--            <Order :info-data="data.select_customer"/>-->
<!--          </n-tab-pane>-->
          <n-tab-pane name="项目划扣">
            <Project :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="诊疗记录">
            <Cases :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="健康顾问记录">
            <Interview :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="用药管理">
            <Medicine :info-data="data.select_customer"/>
          </n-tab-pane>
<!--          <n-tab-pane name="耗材记录">-->
<!--            <Material :info-data="data.select_customer"/>-->
<!--          </n-tab-pane>-->
          <n-tab-pane name="对比照">
            <Photo :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="客户笔记">
            <Tags :info-data="data.select_customer"/>
          </n-tab-pane>
          <n-tab-pane name="治疗方案">
            <Return :info-data="data.select_customer"/>
          </n-tab-pane>

        </n-tabs>
  </div>
</template>

<style>
.main_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:60px;
  background: linear-gradient(90deg, #c87373 10%, #67367e 100%);
  padding:0 20px;
  color: #fff;
  .tags{
    margin-right: 5px;
  }
  .avatar{
    width: 40px; height: 40px; margin-right: 10px;border-radius: 50%;
    border:2px solid #fff;
  }

  .info{
    height: 40px;
    line-height: 20px;
    .no{
      font-size: 12px;
    }

  }
}
.info1{
    width: 100%;
    padding:20px;
    display: flex;
    .data_card{
      width:25%;
      height:100px;
      margin-right: 20px;
      background: rgba(200,115,115,0.2);
      color:#fff;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon{
        margin-right:20px;
        background: rgba(200,115,115,1);
        padding: 5px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .con{
        line-height: 20px;
        font-size: 25px;
        color:rgba(200,115,115,1);
        .tag{
          font-size: 14px;
          color: #000;
          font-weight: normal;
        }
      }
    }
  }
</style>